<template>
  <div
    class="banner-bg-header"
    v-if="visible"
    :style="
      showArrow
        ? 'padding-bottom:30px;height:calc(100vh - 80px);min-height:100vh'
        : 'padding-bottom:100px;'
    "
  >
    <div class="header-img-wrapper">
      <img :src="bgImg" />
    </div>
    <div
      class="content"
      :style="showArrow ? 'margin-bottom:60px;' : 'margin-bottom:30px;'"
    >
      <h1 class="banner-title">{{ title }}</h1>

      <div v-if="useSlot" v-html="slotContent"></div>
      <h4 class="banner-sub-title" v-else></h4>
    </div>
    <div
      class="header-arrow bounce animated"
      v-if="showArrow"
      @click="scrollToContent()"
    >
      <span><q-icon name="mdi-arrow-down"/></span>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Typed from 'typed.js';
import { scroll } from 'quasar';
const { getScrollTarget, setScrollPosition, getScrollPosition } = scroll;
@Component({
  mounted() {
    // Can also be included with a regular script tag
    setTimeout(() => {
      if ((this as any).subTitle) {
        var options = {
          strings: [(this as any).subTitle],
          typeSpeed: 100,
          startDelay: 300,
          loop: true,
          backSpeed: 50
        };

        var typed = new Typed('.banner-sub-title', options);
      }
    }, 300);

    // this.utils.throttling(() => {

    // }, 100)
  }
})
export default class HeaderCover extends Vue {
  get visible(): boolean {
    return this.$store.state.headerCover.value.visible;
  }

  get bgImg() {
    return this.$store.state.headerCover.value.bgImg;
  }
  get title() {
    return this.$store.state.headerCover.value.title;
  }
  get subTitle() {
    return this.$store.state.headerCover.value.subTitle;
  }
  get useSlot() {
    return this.$store.state.headerCover.value.useSlot;
  }
  get slotContent() {
    return this.$store.state.headerCover.value.slotContent;
  }
  get showArrow() {
    return this.$store.state.headerCover.value.showArrow;
  }

  scrollToContent() {
    const el = document.querySelector('html');
    const offset =
      (document.querySelector('#main') as HTMLElement).offsetTop - 80;
    const duration = 300;
    setScrollPosition(el as HTMLElement, offset, duration);
  }
}
</script>

<style lang="scss" scoped>
.banner-bg-header {
  padding: 130px 0 100px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  //   margin-top: -$header-height;
  .content {
    position: absolute;
    width: 100%;
    top: 30%;
  }
  .banner-title {
    font-weight: 100;
    font-size: 30px;
    margin-bottom: 10px;
    margin-top: 30px;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 4px 8px rgba(7, 17, 27, 0.4);
  }
  .banner-sub-title {
    font-weight: 100;
    font-size: 15px;
    color: #eee;
    color: rgba(255, 255, 255, 0.8);
  }
  .header-img-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    &::after {
      content: '';
      width: 100%;
      height: 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      background: linear-gradient(to top, #f6f6f6, transparent);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffff, GradientType=0);
    }
  }
  img {
    object-fit: cover;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    filter: brightness(0.7);
    width: 100%;
    height: 100%;
  }
  .header-arrow {
    position: absolute;
    width: 100%;
    color: #ffffff;
    font-size: 2em;
    padding: 0.25em 0 0 0;
    display: flex;
    justify-content: center;
    bottom: 30px;
    span {
      display: flex;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      padding: 5px;
      border: solid 1px #ffffff;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.bounce {
  animation: scroll-down-effect 1.5s infinite !important;
}
@keyframes scroll-down-effect {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateY(-30px);
    opacity: 0.4;
  }
  60% {
    transform: translateY(-15px);
    opacity: 0.6;
  }
}
// @keyframes scroll-down-effect {
//   0% {
//     transform: translateY(5px);
//     opacity: 0.4;
//     -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
//     filter: alpha(opacity=40);
//   }
//   50% {
//     transform: translateY(15px);
//     opacity: 1;
//     -ms-filter: none;
//     filter: none;
//   }
//   100% {
//     transform: translateY(0);
//     opacity: 0.4;
//     -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
//     filter: alpha(opacity=40);
//   }
// }
</style>
